<template>

    <div style="margin-left: 80px;" class="sidebar">
        <div class="head">找到{{ total }} 首单曲</div>
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                text-color="#6F6351"
                active-text-color="#d14131"
                >
                <el-menu-item index="1" class="el-item">单曲</el-menu-item>
                <el-menu-item index="2" class="el-item">专辑</el-menu-item>
                <el-menu-item index="3" class="el-item">歌手</el-menu-item>
                <el-menu-item index="4" class="el-item">用户</el-menu-item>
                <el-menu-item index="5" class="el-item">Mv</el-menu-item>
            </el-menu>    

            
            <template>
            <div >
                <el-table         
                :data="recodes" 
                stripe style="width: 100%; user-select: none;" 
                :row-class-name="tableRowClassName"
                @row-click="playMusic"
                :cell-style="cellStyle"
                height="700"
                >
                    <el-table-column label="#" width="50">
                        <template slot-scope="scope">
                        <div v-if="toggle === scope.row.url">
                            <!-- 是否改变播放时的按钮 -->
                           <!-- <i class="el-icon-service"></i> -->
                           {{ scope.$index +1}}
                        </div>
                        <div v-if="toggle != scope.row.url">
                            {{ scope.$index +1}}
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column prop="songName" label="音乐标题">

                    </el-table-column>

                    <el-table-column prop="singerName" label="歌手" width="180">
                    </el-table-column>

                    <el-table-column prop="album" label="专辑名" :show-overflow-tooltip="true" align="center" width="500">
                    </el-table-column>

                    <el-table-column prop="musictotaltime" label="时长" width="180">
                    </el-table-column>
                </el-table>
            </div> 
            </template>

    </div>



    
  </template>

  <script>
  import { mapGetters } from 'vuex';
  import { PageQuery } from '../api/search'
    export default {
        created(){
            this.searchSongs();
        },
        watch:{
           
        },
        computed: {
        ...mapGetters([
            'url',
        ]),
    },
        methods:{
            //设置单元格内部的设置播放的字体变红
            cellStyle({row, column, rowIndex, columnIndex}) {
                let cellStyle;
                if(row.url === this.url){
                    cellStyle = 'color:red';        
                }
                if(column.label == '音乐标题'){
                    return cellStyle
                }
            },
            playMusic(row, event, column){
                this.toggle = row.url;
                this.$store.commit('setUrl', row.url)
                this.$store.commit('setIsPlay', true)
                this.$store.commit('setType', 'on')
                this.$store.commit('setMusicTotalTime',row.musictotaltime)
                this.$store.commit('setMusicImg',row.musicImg)
                this.$store.commit('setSingerName',row.singerName)
                this.$store.commit('setSongName',row.songName)
                this.$store.commit('setMusicIndex',row.index)
                this.$store.commit('setListSong',this.recodes)
            },
            //给每一行数据添加index
            tableRowClassName({ row, rowIndex }) {
                row.index = rowIndex;
            },
            searchSongs(){
                const data ={ "keywords" : this.keywords ,"page": this.page, "pageSize": this.pageSize}
                PageQuery(data).then((res) => {
                if (res.data.code === 1) {
                    this.recodes = res.data.data.recodes
                    this.total = res.data.data.total
                }
            }).catch((error) => {
                this.$message.error('请求出错了')
            })
            },
            indexMethod(index) {
                this.index = index;
                return index+1;
            }
        },

      data() {
        return {
            activeIndex: '1',
            toggle:false,
            keywords:this.$route.query.keywords,
            page:1,
            pageSize:100,
            total:0,
            recodes: []
        }
      }
    }
  </script>


<style scoped>
.head{
    position: relative;
    Text-align: left;
    line-height: 20px;
    font-weight: bold; 
    color: #6F6351;
}
.but{
    position:relative;
    Text-align: left;
    margin-top: 20px;
    margin-bottom: 30px;
}

.el-button{
    font-size: 16px; 
    font-weight: bold; 
    color: #6F6351;
    margin-left: 30px; 
}
.el-button:focus{
    font-weight: bold; 
    color: #6F6351;
    font-size: 20px; 
    border-bottom:5px solid #d14131 ;

}
.el-item{
    font-size: 16px; 
    font-weight: bold; 
    color: #6F6351;

}

.el-menu.el-menu--horizontal{
    border: none;
}
.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
  height: 1rem;
  line-height: 0.5rem;
  margin-top: 30px;
  margin-bottom: 10px;
  user-select: none;
}
.el-menu--horizontal > .el-menu-item.is-active {
    user-select: none;
}
/* // 设置滚动条的宽度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
}
/* // 设置滚动条的背景色和圆角 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb  {
  background-color: #BEC3CA;
  border-radius: 8px;
}

</style>